<template>
  <div>
    <!-- <header-page></header-page>
    <navbar> </navbar>
    <devlop-page></devlop-page> -->

    <div class="free">
      <div class="points">
        <ul>
          <li v-for="(item, index) in prolist" :key="index">
            <h4>{{ item.title }}</h4>
            <p>{{ item.contents }}</p>
          </li>
        </ul>
      </div>
      <div class="cooperation">
        <h4>硬件合作方：</h4>
        <ul>
          <li v-for="(item, index) in imga" :key="index">
            <!-- {{item.imgs}} -->
            <img :src="item.imgs" alt="" />
          </li>
        </ul>
      </div>
    </div>
    <!-- <myfooter></myfooter> -->
  </div>
</template>

<script>
import headerPage from "./headerPage.vue";
import navbar from "./navbar.vue";
import devlopPage from "./devlopPage.vue";
import myfooter from "./footerpage.vue";
export default {
  components: {
    headerPage,
    navbar,
    devlopPage,
    myfooter,
  },
  data() {
    return {
      prolist: [
        {
          title: "It's Free!",
          contents:
            "你可以在沙发管家智能电视应用市场发布你的应用，每天可能获得十万次的应用下载量，带来更多的收益，而这一切都是免费的！",
        },
        {
          title: "完善的分类系统",
          contents:
            "沙发管家特别针对 Android 机顶盒/电视的特性设计了一整套完善分类系统，帮助用户准确快速的定位到你的应用。",
        },
        {
          title: "高速的下载通道",
          contents:
            "上架到沙发管家的应用都会使用高速稳定的下载带宽，以确保你的应用快速稳定地下载到用户终端，减少用户的等待时间。",
        },
        {
          title: "严格的质量检测",
          contents:
            "我们在应用上架前都会进行详尽可用性测试，包括但不限于主流机顶盒/电视的兼容性检测，遥控器适配，屏幕适配等等。",
        },
      ],
      imga: [
        { imgs: require("../assets/images/001.jpg") },
        { imgs: require("../assets/images/002.jpg") },
        { imgs: require("../assets/images/003.jpg") },
        { imgs: require("../assets/images/004.jpg") },
        { imgs: require("../assets/images/005.jpg") },
        { imgs: require("../assets/images/006.jpg") },
        { imgs: require("../assets/images/007.jpg") },
        { imgs: require("../assets/images/008.jpg") },
        { imgs: require("../assets/images/009.jpg") },
        { imgs: require("../assets/images/010.jpg") },
        { imgs: require("../assets/images/011.jpg") },
        { imgs: require("../assets/images/012.jpg") },
        { imgs: require("../assets/images/013.jpg") },
        { imgs: require("../assets/images/014.jpg") },
        { imgs: require("../assets/images/015.jpg") },
        { imgs: require("../assets/images/016.jpg") },
        { imgs: require("../assets/images/017.jpg") },
        { imgs: require("../assets/images/018.jpg") },
        { imgs: require("../assets/images/019.jpg") },
        { imgs: require("../assets/images/020.jpg") },
        { imgs: require("../assets/images/021.jpg") },
        { imgs: require("../assets/images/022.jpg") },
        { imgs: require("../assets/images/023.jpg") },
        { imgs: require("../assets/images/024.jpg") },
      ],
    };
  },
};
</script>

<style >
* {
  margin: 0;
  padding: 0;
}
.free {
  width: 1200px;
  /* height: 600px; */
  margin: 0 auto;
}
li {
  list-style: none;
}

.points ul {
  display: flex;
}
.points li {
  width: 25%;
  padding-right: 40px;
  text-align: left;
}
.points li p {
  line-height: 25px;
}
.cooperation {
  /* height: 560px; */
  margin-top: 40px;
}
.cooperation ul {
  margin: 0 -20px 10px;
  overflow: hidden;
}
.cooperation li {
  float: left;
  margin: 0 20px;
  margin-top: 40px;
  padding-left: 10px;
  text-align: center;
}
.cooperation h4 {
  text-align: left;
}
.cooperation li img {
  width: 100px;
}
</style>